<script>
import {
  addCategoryDetail,
  delCategoryDetail,
  getCategoryList,
  updateCategoryDetail
} from '@/api/category'
import { validateStrLen } from '@/utils/validate'
import { delHealthRecordsDetail } from '@/api/health_records'

export default {
  name: 'Index',
  data() {
    return {
      list: [],
      active: 0,
      centerActive: 0
    }
  },
  computed: {
    centerList({ list, active }) {
      return list.length ? this.list[active].children : []
    },
    rightList({ list, centerActive, centerList }) {
      return centerList?.length ? centerList[centerActive].children : []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      const res = await getCategoryList()
      if (res.code === 200) {
        this.list = res.data
      }
    },
    handleActive(p, index) {
      this[p] = index
    }, // 校验兴趣爱好
    validateClassFication(value) {
      if (value == null || value.trim() === '') {
        return '请输入分类名称'
      } else if (!validateStrLen(value, 20)) {
        return '长度不超过10个汉字或20个字符'
      }
    },
    onAdd({ parentId, rootId }) {
      this.$prompt('请输入分类名称', '新建分类', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValidator: this.validateClassFication,
        roundButton: true
      })
        .then(({ value }) => {
          const data = {
            parentId,
            rootId,
            name: value
          }
          addCategoryDetail(data).then((res) => {
            if (res.code === 200) {
              this.getList()
            }
          })
          this.$notify({
            title: '成功',
            message: '新增分类: ' + value,
            type: 'success',
            duration: 2000,
            offset: 40
          })
        })
        .catch(() => {})
    },
    onEdit(item) {
      this.$prompt('请输入分类名称', `编辑分类：${item.name}`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValidator: this.validateClassFication,
        roundButton: true
      })
        .then(async({ value }) => {
          const res = await updateCategoryDetail({
            id: item.id,
            name: value
          })
          if (res.code === 200) {
            this.$notify({
              title: '成功',
              message: '保存分类: ' + value,
              type: 'success',
              duration: 2000,
              offset: 40
            })
            await this.getList()
          }
        })
        .catch(() => {})
    },
    onDel(e) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await delCategoryDetail({
          id: e.id
        })
        if (res.code === 200) {
          this.list = []
          await this.getList()
          this.$message.success(res.data)
        }
      })
    }
  }
}
</script>

<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>一级分类</span>
      </div>
      <div
        v-for="(item, index) in list"
        :key="item.id"
        class="text item"
        :class="[active === index ? 'active' : '']"
        @click="handleActive('active', index)"
      >
        <span>{{ item.name }}</span><i class="el-icon-edit" @click="onEdit(item)" /><i
          class="el-icon-delete"
          @click="onDel(item)"
        />
      </div>
      <el-button
        type="primary"
        class="add"
        @click="onAdd({ parentId: 0, rootId: 0 })"
      >添加分类</el-button>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>二级分类</span>
      </div>
      <div
        v-for="(item, index) in centerList"
        :key="item.id"
        class="text item"
        :class="[centerActive === index ? 'active' : '']"
        @click="handleActive('centerActive', index)"
      >
        <span>{{ item.name }}</span><i class="el-icon-edit" @click="onEdit(item)" /><i
          class="el-icon-delete"
          @click="onDel(item)"
        />
      </div>
      <el-button
        type="primary"
        class="add"
        @click="onAdd({ parentId: list[active].id, rootId: list[active].id })"
      >添加分类</el-button>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>三级分类</span>
      </div>
      <div v-for="item in rightList" :key="item.id" class="text item">
        <span>{{ item.name }}</span><i class="el-icon-edit" @click="onEdit(item)" /><i
          class="el-icon-delete"
          @click="onDel(item)"
        />
      </div>

      <el-button
        type="primary"
        class="add"
        @click="
          onAdd({
            parentId: centerList[centerActive].id,
            rootId: list[active].id,
          })
        "
      >添加分类</el-button>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.app-container {
  display: flex;
  justify-content: space-around;
}
.box-card {
  position: relative;
  width: 33%;
  padding-bottom: 40px;
  .item {
    padding: 10px 0;
    padding-left: 10px;
  }
  .text {
    font-size: 16px;
  }
  .el-icon-edit,
  .el-icon-delete {
    margin-left: 10px;
    font-size: 18px;
  }
}
.active {
  background-color: #f7f7f7;
}
.add {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}
</style>
